<template>
  <view class="account">
    <view class="header">
      <view
        class="header-date"
        @click="showDate = true">
        <view class="header-date-desc">{{ accountDate }}</view>
        <u-picker
          mode="time"
          v-model="showDate"
          :params="params"
          @confirm="handleDateSelect"></u-picker>
        <u-icon
          name="arrow-down-fill"
          color="#D8D8D8"
          size="28"></u-icon>
      </view>
      <view class="header-num">运费收入：+{{ freightTotalAmt }}</view>
    </view>
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="goDetail(item)">
        <view>
          <view class="item-title">运费支付</view>
          <view class="item-code">{{ item.dispatchCode }}</view>
          <view class="item-date">{{ item.settleAt }}</view>
        </view>
        <view class="item-num">+{{ item.settleAmt }}</view>
      </view>
    </view>
    <u-empty
      text="列表为空"
      class="kong"
      mode="list"
      v-if="list.length === 0"></u-empty>
    <u-loadmore
      v-if="list.length"
      bg-color="#f6f6f6"
      :status="loadStatus"></u-loadmore>
  </view>
</template>

<script>
import { d_resNull } from 'common/util.js'
export default {
  data() {
    return {
      list: [],
      showDate: false,
      total: 0,
      loadStatus: 'loadmore',
      taglistShow: true, //存是否还有值
      accountDate: '',
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      },
      pageSize: 20,
      pageNum: 1,
      freightTotalAmt: 0,
      paramsDate: ''
    }
  },
  onLoad() {
    this.accountDate = this.$u.timeFormat(new Date(), 'yyyy年mm月')
    this.paramsDate = this.$u.timeFormat(new Date(), 'yyyy-mm')
    this.getList()
  },
  onReachBottom() {
    if (this.taglistShow) {
      this.showLoading()
      this.loadStatus = 'loading'
      setTimeout(() => {
        this.pageNum++
        uni.stopPullDownRefresh()
        this.getList()
        this.loadStatus = 'nomore'
      }, 1000)
    } else {
      this.loadStatus = 'nomore'
    }
  },
  // 强制下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1
    this.pageSize = 20
    // this.showLoading()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.getList()
    }, 1000)
  },
  methods: {
    showLoading() {
      uni.showLoading({
        title: '加载中'
      })
    },
    hideLoading() {
      uni.hideLoading()
    },
    async getList() {
      const { code, result, message } = await this.$u.get(
        '/freight-business/freightDispatch/driver/freightAmtDetail',
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          settleAt: this.paramsDate
        }
      )
      if (code == '0') {
        this.taglistShow = result.page.records.length ? true : false
        this.freightTotalAmt = result.freightTotalAmt
        this.loadStatus =
          result.page.records.length < this.pageSize ? 'nomore' : 'loadmore'
        if (this.pageNum == 1) {
          this.list = result.page.records
        } else {
          this.list = this.list.concat(d_resNull(result.page.records))
        }
      }
      this.hideLoading()
    },
    handleDateSelect(e) {
      this.accountDate = `${e.year}年${e.month}月`
      this.paramsDate = `${e.year}-${e.month}`
      this.pageNum = 1
      this.getList()
    },
    goDetail(item) {
      uni.setStorageSync('freightData', item)
      uni.navigateTo({
        url: '/pages/wallet/freight-detail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.account {
  min-height: 100vh;
  width: 100%;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 24rpx 30rpx 0;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-date {
  display: flex;
  align-items: center;
  width: 250rpx;
  height: 64rpx;
  background: #fefefe;
  border-radius: 32rpx;
  &-desc {
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    margin-left: 26rpx;
    margin-right: 16rpx;
  }
}
.header-num {
  font-size: 24rpx;
  font-weight: 500;
  color: #949699;
  line-height: 33rpx;
}

.list {
  width: 100%;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 24rpx;
  margin-bottom: 20rpx;
}
.item {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  height: 146rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &-title {
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 40rpx;
  }
  &-code {
    font-size: 24rpx;
    line-height: 40rpx;
    color: #999999;
  }
  &-date {
    font-size: 24rpx;
    font-weight: 500;
    color: #949699;
    line-height: 28rpx;
  }
  &-num {
    font-size: 32rpx;
    font-weight: 500;
    color: #e02020;
    line-height: 45rpx;
    text-align: right;
  }
}
</style>
